<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>sentox-ComboGrid</title>
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/easyui.css" />
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/font-awesome.min.css">

		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	</head>

	<body style="margin:10px;">
		<h2>Basic ComboGrid</h2>
		<p>Click the right arrow button to show the DataGrid.</p>
		<div style="margin:20px 0"></div>
		<select class="easyui-combogrid" style="width:250px" data-options="
				panelWidth: 500,
				idField: 'itemid',
				textField: 'productname',
				url: '../json/datagrid_data1-ComboGrid.json',
				method: 'get',
				columns: [[
					{field:'itemid',title:'Item ID',width:80},
					{field:'productname',title:'Product',width:120},
					{field:'listprice',title:'List Price',width:80,align:'right'},
					{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
					{field:'attr1',title:'Attribute',width:200},
					{field:'status',title:'Status',width:60,align:'center'}
				]],
				fitColumns: true
			">
		</select>
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>Multiple ComboGrid</h2>
		<p>Click the right arrow button to show the DataGrid and select items.</p>
		<div style="margin:20px 0"></div>
		<select class="easyui-combogrid" style="width:250px" data-options="
				panelWidth: 500,
				multiple: true,
				idField: 'itemid',
				textField: 'productname',
				url: '../json/datagrid_data1-ComboGrid.json',
				method: 'get',
				columns: [[
					{field:'ck',checkbox:true},
					{field:'itemid',title:'Item ID',width:80},
					{field:'productname',title:'Product',width:120},
					{field:'listprice',title:'List Price',width:80,align:'right'},
					{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
					{field:'attr1',title:'Attribute',width:200},
					{field:'status',title:'Status',width:60,align:'center'}
				]],
				fitColumns: true
			">
		</select>
		<!----------------------------------------------------------------------------------------------------------------------------->
	</body>

</html>